<template>
  <div>
    <h2>{{ titleMsg }}</h2>
    <van-calendar
      title="日历"
      :poppable="false"
      :show-confirm="false"
      :style="{ height: '500px' }"
    />
    <div>router: {{ $route.query.id || '' }}</div>
    <div
      style="width: 200px; height: 200px; background-color: #2c8dfb"
      @click="handleClick"
    >
      点击
    </div>
  </div>
</template>

<script>
export default {
  name: 'detail',
  data() {
    return {
      titleMsg: '测试自身跳自身页面',
      isFresh: false
    };
  },
  created() {
    console.log('detail=created============');
  },
  mounted() {
    console.log('detail=mounted============');
  },
  activated() {
    console.log('detail=activated============', this.isFresh);
  },
  deactivated() {
    console.log('detail=deactivated============');
  },
  beforeRouteEnter(to, from, next) {
    console.log('detail=beforeRouteEnter==', to, from);
    // 写法一
    next(vm => {
      vm.isFresh = from.path !== '/detail';
    });
    // 写法二
    // if (from.path !== '/detail') {
    //   next(vm => (vm.isFresh = true));
    // } else {
    //   next();
    // }
    // 在导航完成前获取数据
    // getPost(to.params.id, (err, post) => {
    //   next(vm => vm.setData(err, post))
    // })
  },
  beforeRouteUpdate(to, from, next) {
    this.titleMsg = this.titleMsg + '//123';
    console.log('detail=beforeRouteUpdate==', to, from);
    next();
  },
  // watch: {
  //   $route(to, from) {
  //     console.log('watch==', to, from);
  //     // 对路由变化作出响应...
  //        this.$router.go(0); // => 在history记录中前进或者后退val步，当val为0时刷新当前页面。
  //   },
  //   '$route.query.id'() {
  //     console.log('watch==2');
  //     // 对路由变化作出响应...
  //   }
  // },
  methods: {
    handleClick() {
      // this.$router.push({
      //   path: '/detail',
      //   query: {
      //     id: new Date().getTime()
      //   }
      // });
      this.$router.replace({
        path: '/detail',
        query: {
          id: new Date().getTime()
        }
      });
    }
  }
};
</script>

<style scoped></style>
